<template>
	<div id="recommendmusic">
		<div class="backgrounds">

			<div class="top" :style="backgrounds">
				<div>
					<i class="iconfont icon-return" @click="$router.go(-1)"></i>
					<p v-show="searchFix">每日推荐</p>
				</div>
				<i class="iconfont icon-liebiao"></i>

			</div>

			<div class="dates" v-show="!searchFix">
				<p>{{getDay("day")}}</p>/
				<span>{{getDay("month")}}</span>
			</div>
		</div>
		<div class="musictitle" :class="searchFix" ref="searchDom">
			<div class="playmore">
				<i class="iconfont icon-bofang"></i>
				<span>播放全部</span>
			</div>
			<div class="morechoose">
				<i class="iconfont icon-gengduo"></i>
				<span>多选</span>
			</div>
		</div>
		<div class="musicall">

			<div class="musicone" v-for="item in musicList" :key="item.id">
				<div class="box">
					<div class="imgbox">
						<img :src="item.album.blurPicUrl" alt="" />
					</div>
					<div class="boxtitle">
						<h2>{{item.album.name}}</h2>
						<p>{{item.artists[0].name}}</p>
					</div>
				</div>
				<div class="icons">

					<i class="iconfont icon-bofang"></i>
					<i class="iconfont icon-dashujukeshihuaico-"></i>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "music",
		data() {
			return {
				data: "",
				musicList: [],
				searchFix: "",
				domTop: 0,
				backgrounds:""
			}
		},
		methods: {
			getmusic() {
				this.$http.get("/recommend/songs").then(res => {
					console.log(res)
					this.musicList = res.data.recommend
				})
			},
			getDay(res) {
				var today = new Date();
				console.log(res)
				if(res == 'month') {
					if(today.getMonth() + 1 > 9) {
						return today.getMonth() + 1
					} else {
						return "0" + (today.getMonth() + 1)
					}

				} else {
					return today.getDate()
				}

			},
			myScroll() {
				let curScrollTop = window.pageXOffset || document.documentElement.scrollTop
				
				if(curScrollTop - this.domTop >= -44) {
					
					this.searchFix = "searchFix";
					this.backgrounds = "background-color:red";
				} else {
					this.searchFix = "";
					this.backgrounds = "";
					
				}
			}
		},
		created() {
			this.getmusic();

		},
		mounted() {
			this.domTop = this.$refs.searchDom.offsetTop;
			window.addEventListener("scroll", this.myScroll)
		},
		//		beforeDestroy(){
		//			window.removeEventListener("scroll",this.myScroll)
		//		}

	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	#recommendmusic {
		.backgrounds {
			width: 100%;
			height: vw(150);
			background: url("../../assets/images/backgroundmusic.png") no-repeat;
			background-position: 50% 50%;
			background-size:120%;
			position: relative;
			.top {
				width: 100%;
				position: fixed;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: vw(10) vw(16);
				
				div {
					display:flex;
					align-items:center;
					i {
						font-size: vw(24);
						color: white;
					}
					p {
						color: #fff;
						font-size: vw(18);
						margin-left: vw(4);
					}
				}
				i{
					font-size: vw(24);
					color: white;
				}
			}
			.dates {
				display: flex;
				align-items: flex-end;
				position: absolute;
				bottom: 30px;
				left: 16px;
				color: white;
				font-size: vw(16);
				p {
					font-size: vw(36);
					color: white;
					font-weight: 400;
					margin-right: vw(4);
					line-height: 1;
				}
				span {
					font-size: vw(18);
					color: white;
					margin-left: vw(4);
					line-height: 1;
				}
			}
		}
		.musictitle {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: vw(60);
			background: #fff;
			padding: 0 vw(16);
			margin-top: vw(-20);
			position: relative;
			z-index: 1;
			.playmore {
				i {
					font-size: vw(18);
				}
				span {
					font-size: vw(16);
					margin-left: vw(10);
				}
			}
			.morechoose {
				i {
					font-size: vw(14);
				}
				span {
					font-size: vw(16);
					margin-left: vw(10);
				}
			}
		}
		.searchFix {
			position: fixed;
			top: vw(66);
			left: 0;
			width: 100%;
			z-index: 2;
		}
		.musicall {
			width: 100%;
			background-color: white;
			border-radius: vw(10);
			padding: vw(10) vw(16);
			.musicone {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: vw(10) 0;
				.box {
					.imgbox {
						display: inline-block;
						width: vw(40);
						height: vw(40);
						overflow: hidden;
						img {
							width: 100%;
						}
					}
					.boxtitle {
						margin: 0 vw(10);
						display: inline-block;
						vertical-align: top;
						h2 {
							width: vw(180);
							font-size: vw(16);
							color: #333;
							font-weight: 600;
							margin: 0 0 vw(2);
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
						p {
							font-size: vw(12);
							color: #999;
						}
					}
				}
				.icons {
					display: flex;
					align-items: center;
					color: #999;
					i {
						font-size: vw(24);
						margin: 0 0 0 vw(10);
					}
					i:nth-child(2) {
						font-size: vw(32);
						
					}
				}
			}
		}
	}
</style>